<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web第四次学习</title>
    <!-- 引入bootsrap css -->
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">
    <!--  定义页面样式  -->
    <style type="text/css">
        form {color:green}
    </style>
    <!--  引入外部的js库-->
    <script src="../lib/easyui/jquery.min.js"></script>
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div id="dlg1"></div>
<hr>
<table id="books"></table>
<script>
    $(function(){
        $('#books').datagrid({
            url:"books2.json",
            fitColumns:true,
            pagination:true,
            rownumbers:true,
            pageNumber: 1,
            pageSize: 1,
            pageList: [1, 15, 20, 30, 40, 50, 60, 70, 80, 100, 200],
            singleSelect: true,//只允许选中一行
            columns:[[
                {field:'code',title:'代码',width:100},
                {field:'name',title:'书名',width:100},
                {field:'price',title:'价格',width:100,align:'right'}
            ]],
            onClickRow:function(index, row){   //点击行触发事件，index为被点击行的索引，row为被点击行对应的数据
                console.log(index),
                console.log(row)
                $('#dlg1').dialog({
                    title: '书籍详情',
                    width: 400,
                    height: 400,
                    closed: false,
                    cache: false,
                    href: 'book2.html',
                    modal: true
                })
                setTimeout(function(){
                    $('#form2').form('load',row)//加载记录填充表单
                },150)//150毫秒后调用function函数
            }
        })
    })
</script>
</body>
</html>